<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小米手机商城</title>
    <link rel="stylesheet" href="css/app.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <div class="home-brick-box home-brick-row-2-box xm-plain-box">
            <div class="box-hd">
                <h2 class="title">手机</h2>
                <div class="more">
                    <a href="#" target="_blank" class="more-link">
                        查看更多
                        <i class="iconfont iconfont-arrow-right-big "></i>
                    </a></div>
            </div>
            <div class="box-bd clearfix">
                <div class="row">
                    <div class="span1">
                        <ul class="brick-promo-list clearfix">
                            <li class="brick-item brick-item-l"><a href="#">
                                    <img
                                        alt=""
                                        src="images/ad1.png"
                                        lazy="loaded"></a></li>
                        </ul>
                    </div>
                    <div class="span2">
                        <ul class="brick-list clearfix">
                            <li class="brick-item brick-item-m brick-item-m-2" v-for="(item, index) in arrs" :key="index"><a :href="item.url">
                                <div class="figure figure-img">
                                    <img width="160" height="160" :alt="item.iphoneImg"
                                    :src="item.iphoneImg">
                                </div>
                                <h3 class="title">
                                    {{item.iphoneTitle}}
                                </h3>
                                <p class="desc">{{item.iphoneDesc}}</p>
                                <p class="price"><span class="num">{{item.iphonePrice}}</span>元<span>起</span></p>
                            </a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        const app =Vue.createApp({
    data(){
      return{
        arrs:[
            {
                url:'#',iphoneImg:'images/phone1.png',iphoneTitle:'Xiaomi 14 Ultra',iphoneDesc:'徕卡全明星四摄 | 双向卫星通信  | 小米澎湃OS',iphonePrice:'6499'
            },
            {
                url:'#',iphoneImg:'images/phone2.png',iphoneTitle:'Redmi K70 Pro',iphoneDesc:'第三代骁龙8 年度旗舰平台',iphonePrice:'3299'
            },
            {
                url:'#',iphoneImg:'images/phone3.png',iphoneTitle:'Redmi K70',iphoneDesc:'第二代骁龙8 旗舰芯',iphonePrice:'2399'
            },
            {
                url:'#',iphoneImg:'images/phone4.png',iphoneTitle:'Redmi K70E',iphoneDesc:'新一代旗舰焊门员',iphonePrice:'1899'
            },
            {
                url:'#',iphoneImg:'images/phone5.png',iphoneTitle:'Xiaomi 14 Pro',iphoneDesc:'徕卡Summilux可变光圈镜头｜小米澎湃OS',iphonePrice:'4999'
            },
            {
                url:'#',iphoneImg:'images/phone6.png',iphoneTitle:'Xiaomi 14',iphoneDesc:'徕卡光学Summilux镜头｜小米澎湃OS｜第三代骁龙®8移动平台',iphonePrice:'3399'
            },
            {
                url:'#',iphoneImg:'images/phone7.png',iphoneTitle:'Redmi Note 13 Pro',iphoneDesc:' 小金刚品质',iphonePrice:'1399'
            },
            {
                url:'#',iphoneImg:'images/phone8.png',iphoneTitle:'Redmi Note 13 Pro+',iphoneDesc:' 天玑 7200-Ultra 处理器',iphonePrice:'1899'
            }
        ]
      } 
    }
  });
 var vm= app.mount('#app');
    </script>
</body>
</html>